<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>备件管理系统 - 出库记录</title>
  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
</head>
<body>
<div id="app">
  <!-- 页面标题插槽 -->
  <h2 style="display: none;"><slot name="pageTitle">出库记录</slot></h2>

  <!-- 页面头部插槽 -->
  <header class="header">
    <h2 style="margin: 0;">出库记录</h2>
    <!-- 使用外层容器包裹退出按钮 -->
    <div style="display: flex; flex-direction: column; align-items: flex-end; gap: 10px;">
      <el-button type="info" size="small" @click="logout">退出</el-button>
    </div>
  </header>

  <!-- 主体内容插槽 -->
  <main>
    <!-- 新增按钮与搜索框水平排列 -->
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
      <el-button type="primary" @click="showAddDialog = true">新增出库记录</el-button>
      <el-button type="success" size="medium" @click="showQRCodeDialog = true">二维码操作</el-button>
      <el-input v-model="searchQuery" placeholder="请输入搜索内容" style="width: 300px;"></el-input>
    </div>

    <!-- 表格 -->
    <el-table :data="filteredOutBoundRecords" border style="width: 100%">
      <el-table-column prop="outboundid" label="ID"></el-table-column>
      <el-table-column prop="sparepartid" label="备件ID"></el-table-column>
      <el-table-column prop="quantity" label="数量"></el-table-column>
      <el-table-column prop="batchNumber" label="批次号"></el-table-column>
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="mini" type="danger" @click="deleteOutBoundRecord(scope.row.outboundid)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增表单 -->
    <el-dialog v-model="showAddDialog" title="新增出库记录" width="40%">
      <el-form :model="newOutBoundRecord" label-position="left" label-width="100px" style="max-width: 400px;">
        <el-form-item label="备件ID">
          <el-input v-model="newOutBoundRecord.sparepartid"></el-input>
        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model="newOutBoundRecord.quantity"></el-input>
        </el-form-item>
        <el-form-item label="批次号">
          <el-input v-model="newOutBoundRecord.batchNumber"></el-input>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker v-model="newOutBoundRecord.date" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-button type="primary" @click="addOutBoundRecord" style="width: 100%">添加</el-button>
      </el-form>
    </el-dialog>
    <!-- 在页面底部添加二维码弹窗组件 -->
    <!-- 二维码弹窗 -->
    <el-dialog v-model="showQRCodeDialog" title="生成二维码" width="30%">
      <div style="text-align: center;">
        <img :src="qrCodeImage" alt="二维码" style="width: 200px; height: 200px;">
      </div>
      <template #footer>
        <div style="text-align: center;">
          <el-button type="primary" @click="generateQRCode">生成二维码</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 底部固定 -->
    <footer class="footer">
      &copy; 2025 备件管理系统 - 版权所有
    </footer>
  </main>
</div>

<!-- 引入 Vue + Axios + Element Plus -->
<script src="https://unpkg.com/vue@3.2.36/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/element-plus"></script>

<script>
  const { createApp } = Vue;
  const apiClient = axios.create({
    //本机地址
    //baseURL: 'http://localhost:8086',
    //服务器 地址
    baseURL: 'http://8.137.85.243:8086',
    timeout: 5000
  });

  const app = createApp({
    data() {
      return {
        outBoundRecordsList: [],
        newOutBoundRecord: { sparepartid: null, quantity: null, batchNumber: '', date: null },
        searchQuery: '',
        showAddDialog: false,
        showQRCodeDialog: false,
        qrCodeImage: null
      };
    },
    mounted() {
      this.loadOutBoundRecords();
    },
    computed: {
      filteredOutBoundRecords() {
        return this.outBoundRecordsList.filter(record =>
          record.sparepartid.toString().includes(this.searchQuery) ||
          record.batchNumber.includes(this.searchQuery)
        );
      }
    },
    methods: {
      async loadOutBoundRecords() {
        const res = await apiClient.get('/api/outboundrecords/listall');
        this.outBoundRecordsList = res.data;
      },
      async deleteOutBoundRecord(id) {
        if (!confirm('确定删除？')) return;
        await apiClient.delete(`/api/outboundrecords/delete/${id}`);
        this.loadOutBoundRecords();
      },
      generateQRCode() {
        // 生成跳转链接的二维码
        const url = 'http://8.137.85.243:8086/contact/outbound_records.html';

        // 使用Element Plus的Notification组件显示提示信息
        this.$notify({
          title: '提示',
          message: '正在生成二维码...',
          duration: 2000
        });

        // 调用后端API生成二维码
        apiClient.get('/api/qrcode/generate', {
          params: {
            content: url
          }
        }).then(response => {
          // 更新二维码图片
          this.qrCodeImage = response.data;

          // 显示成功提示
          this.$notify({
            title: '成功',
            message: '二维码生成成功！',
            type: 'success',
            duration: 2000
          });
        }).catch(error => {
          // 显示错误提示
          this.$notify.error({
            title: '错误',
            message: '二维码生成失败: ' + error.message,
            duration: 3000
          });
        });
      },
      logout() {
        window.location.href = '/operator.html';
      },
      addOutBoundRecord() {
        // 假设当前用户ID为1，实际应根据登录信息动态获取
        this.newOutBoundRecord.userid = 1;
        apiClient.post('/api/outboundrecords/insert', this.newOutBoundRecord)
            .then(() => {
                this.showAddDialog = false;
                // 清空表单内容
                this.newOutBoundRecord = { sparepartid: null, quantity: null, batchNumber: '', date: null };
                this.loadOutBoundRecords(); // 刷新列表
            })
            .catch(err => {
                console.error("添加失败:", err);
                alert("添加出库记录失败，请检查输入或稍后再试");
            });
      }
    }
  });

  app.use(ElementPlus);
  app.mount('#app');
</script>
</body>
</html>